<script setup lang="ts">
import { getAudioFileTranscriptionRes, getAudionTransQueryRes } from "@/api/identify";
import useDownload from "@/hooks/useDownload";
const { downloadUrl, downloadFile } = useDownload()
import { ref, defineProps } from "vue";

const props = defineProps({
  text: {
    type: String,
  }
})

const loadding = ref(false)
const taskId = ref('')
const recognitionText = ref('')
const pidEnum = {
  '中文普通话': 80001,
  '英语': 1737,
  '音视频字幕（中文）': 80001
}

const formLabelAlign = reactive({
  url: '',
})

const download = () => {
  if (recognitionText.value) {
    downloadUrl.value = `data:text/plain;charset=utf-8,${recognitionText.value}`;
    downloadFile(downloadUrl.value, '音频转写.txt');
  } else {
    ElMessage.error('请先转写');
  }
}

const start = async () => {
  console.log(props.text);
  
  const pid = pidEnum[props.text];
  const url = formLabelAlign.url;
  const format = isAudioUrl(url);

  if (format) {
    loadding.value = true;
    const data = new FormData();
    data.append('pid', pid);
    data.append('url', url);
    data.append('format', format);

    const res: any = await getAudioFileTranscriptionRes(data)
    console.log(res);

    if (res.errorMsg) {
      ElMessage.error('转写失败，请稍后重试');
      loadding.value = false;
      return;
    }

    taskId.value = res.taskId;
    const timer = setInterval(async () => {
      const res: any = await getAudionTransQueryRes([taskId.value])
      const { task_status, task_result } = res.tasks_info[0];
      if (task_status === 'Success') {
        loadding.value = false;
        clearInterval(timer);
        recognitionText.value = task_result.result[0];

      } else if (task_status === 'Failure') {
        loadding.value = false;
        clearInterval(timer);
        ElMessage.error('转写失败，请稍后重试');
      }
    }, 1000);
  } else {
    ElMessage.error('音频格式不支持');
  }
}

function clearImg() {
  recognitionText.value = '';
  taskId.value = '';
}

function isAudioUrl(url) {
  // 定义允许的音频文件类型
  const audioExtensions = ["mp3", "wav", "pcm", "m4a", "amr"]

  // 使用正则表达式匹配URL中的扩展名
  const extensionPattern = /\.(\w+)$/
  const extensionMatch = url.match(extensionPattern)

  // 如果扩展名匹配，并且在允许的文件类型列表中，则返回 true，否则返回 false
  const res = extensionMatch && audioExtensions.includes(extensionMatch[1].toLowerCase())

  return res ? extensionMatch[1].toLowerCase() : false;
}

</script>

<template>
  <div class="audio-trans">
    <div class="input-box">
      <el-form label-position="left" :model="formLabelAlign" style="max-width: 460px">
        <el-form-item label="音频地址">
          <el-tooltip :content="formLabelAlign.url" placement="top" effect="dark">
            <el-input v-model="formLabelAlign.url" clearable />
          </el-tooltip>
        </el-form-item>
        <el-form-item class="center">
          <el-button type="primary" @click="start" :loading="loadding">开始转写</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div class="putVoiceBox">
      <div class="putVoice">
        <div class="preview">
          <div>识别结果</div>
          <div class="addmore" style="margin-left: 20px" @click="clearImg">
            <el-icon class="iconClear">
              <Delete />
            </el-icon>
            <div>清空</div>
          </div>
        </div>
        <div class="getImg" :class="{ 'text-preview': recognitionText }">
          <p v-if="recognitionText">{{ recognitionText }}</p>
          <span v-else>开放蓝天</span>
        </div>
        <div class="footerBtn">
          <div class="addmore" @click="download">
            <el-icon class="iconClear">
              <Download />
            </el-icon>
            <div>下载</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .audio-trans {
    width: 65%;
    display: flex;
    align-items: center;

    .input-box {
      width: 400px;

      .center {
        :deep(.el-form-item__content) {
          justify-content: center;
        }
      }
    }

    .putVoiceBox {
      flex: 1;
      padding-left: 60px;
    }
  }

  .main {
    min-height: 1500px;
    // padding: 20px;
    background-color: var(--main-shallowbg-color);
  }

  // .putBox {
  //   // width: 90%;
  //   // margin: 50px auto;
  //   // display: flex;
  //   // justify-content: space-around;
  // }
  .inputVoice {
    opacity: 0.0;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
  }

  // .putVoice:hover {
  //   box-shadow: 9px 8px 12px var(--main-shallowfont-color);
  // }
  .putVoiceBox {
    width: 90%;
    height: 420px;
    /* margin: 10px auto; */

    .text-preview {
      overflow-y: auto;
      display: block;
      box-sizing: border-box;
      padding-left: 10px;
      padding-top: 10px;
      padding-bottom: 10px;

      p {
        margin: 0;
        line-height: 1.5;
      }
    }
  }

  .putVoice {
    position: relative;
    transition-property: all;
    transition-duration: 0.6s;
    width: 100%;
    height: 400px;
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    border-radius: 10px;
  }

  .preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10%;
    width: 90%;
    margin: 0px auto;
    font-size: 15px;
  }

  .getImg {
    position: relative;
    transition-property: all;
    transition-duration: 0.6s;
    width: 90%;
    height: 75%;
    margin: 5px auto 0px;
    background-color: var(--main-bg-color);
    color: var(--main-font-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: 4px dotted var(--main-shallowbg-color);

    img {
      width: 100%;
      height: 100%;
    }

    .icon {
      font-size: 60px;
      margin-top: -60px;
      margin-bottom: 20px;
      position: relative;
      top: 0px;
      animation-name: example;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      animation-timing-function: linear;
    }

    .h3 {
      font-size: 25px;
      font-weight: 600;
      margin-bottom: 10px;
    }

    .h5 {
      color: #969696;
    }
  }

  @keyframes example {
    from {
      top: 0;
    }

    to {
      top: 12px;
    }
  }

  .addmore {
    transition-property: all;
    transition-duration: 0.5s;
    width: 25%;
    height: 27px;
    border-radius: 10px;
    border: 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;

    .iconClear {
      font-size: 15px;
    }
  }

  .addmore:hover {
    box-shadow: 3px 3px 4px 1px var(--main-shallowfont-color);
  }

  .footerBtn {
    width: 90%;
    height: 10%;
    margin: 10px auto;
    display: flex;
    justify-content: flex-end;
    font-size: 15px;
  }

  .languageBox {
    background-color: var(--main-shallowbg-color);
    // width: 60%;
    // height: 400px;
    padding: 10px;
    color: var(--main-font-color);
  }

  .radioBox {
    margin-top: 10px;
  }

  ::v-deep .el-radio-group {
    margin: 10px;
  }

  ::v-deep .el-radio-button__inner {
    color: var(--main-font-color);
    background-color: var(--main-bg-color);
  }

  ::v-deep .el-radio-button__original-radio:checked+.el-radio-button__inner {
    color: var(--main-bg-color);
    background-color: var(--main-font-color);
    border: var(--main-font-color);
    box-shadow: none;
  }

  @media screen and (min-width: 600px) {
    .main {
      min-height: 1500px;
      // padding: 20px;
      background-color: var(--main-shallowbg-color);
    }

    .putBox {
      width: 95%;
      margin: 0px auto;
      display: flex;
      justify-content: space-around;
    }

    .inputVoice {
      opacity: 0.0;
      width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;
      position: absolute;
    }

    // .putVoice:hover {
    //   box-shadow: 9px 8px 12px var(--main-shallowfont-color);
    // }
    .putVoiceBox {
      width: 40%;
      // height: 400px;
      margin: 10px;
    }

    .putVoice {
      position: relative;
      transition-property: all;
      transition-duration: 0.6s;
      width: 100%;
      height: 400px;
      background-color: var(--main-bg-color);
      color: var(--main-font-color);
      // display: flex;
      // flex-direction: column;
      // justify-content: center;
      // align-items: center;
      border-radius: 10px;
    }

    .preview {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 10%;
      width: 90%;
      margin: 0px auto;
      font-size: 17px;
    }

    .getImg {
      position: relative;
      transition-property: all;
      transition-duration: 0.6s;
      width: 90%;
      height: 76%;
      margin: 0px auto;
      background-color: var(--main-bg-color);
      color: var(--main-font-color);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 10px;
      border: 4px dotted var(--main-shallowbg-color);

      img {
        width: 100%;
        height: 100%;
      }

      .icon {
        font-size: 60px;
        margin-top: -60px;
        margin-bottom: 20px;
      }

      .h3 {
        font-size: 25px;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .h5 {
        color: #969696;
      }
    }

    .languageBox {
      background-color: var(--main-shallowbg-color);
      width: 90%;
      margin: 0px auto;
      // height: 400px;
      // padding: 30px 40px 30px 30px;
      color: var(--main-font-color);
    }

    .radioBox {
      margin: 10px;
    }

    .addmore {
      width: 18%;
      // height: 35px;
      padding: 1px 10px;
      border-radius: 10px;
      border: 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .iconClear {
        font-size: 20px;
      }
    }

    .footerBtn {
      width: 90%;
      height: 10%;
      margin: 10px auto;
      display: flex;
      justify-content: flex-end;
    }
  }
</style>